<template>
    <div class="coupon">
        <div class="opeation">
            <div class="search">
                <el-input placeholder="请输入内容" v-model="search" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </div>

            <div class="add">
                <el-button type="primary" @click="add">新增</el-button>
            </div>
        </div>

        <div class="data-list">
            <el-table :data="couponList" style="width: 100%">
                <el-table-column prop="amount" label="满减金额">
                </el-table-column>
                <el-table-column prop="discountAmount" label="扣减金额">
                </el-table-column>
                <el-table-column prop="startTime" label="开始时间" width="180">
                </el-table-column>
                <el-table-column prop="endTime" label="结束时间" width="180">
                </el-table-column>
                <el-table-column prop="limited" label="限量">
                    <template slot-scope="scope">
                        <span v-show="scope.row.limited == 0">否</span>
                        <span v-show="scope.row.limited == 1">是</span>
                    </template>
                </el-table-column>
                <el-table-column prop="overall" label="不限店铺">
                    <template slot-scope="scope">
                        <span v-show="scope.row.overall == 0">否</span>
                        <span v-show="scope.row.overall == 1">是</span>
                    </template>
                </el-table-column>
                <el-table-column prop="number" label="数量">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <div class="option">
                            <el-button size="mini" @click="edit(scope.row)">编辑</el-button>
                            <el-button size="mini" type="danger">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <div class="form-box">
                <el-input v-model="coupon.storeId" placeholder="店铺id" :disabled="coupon.overall == 1"></el-input>
                <el-input v-model="coupon.amount" placeholder="请输入满减金额"></el-input>
                <el-input v-model="coupon.discountAmount" placeholder="请输入扣减金额"></el-input>
                <div>
                    <div class="block">
                        <span class="demonstration">起始日期时刻为 12:00:00</span>
                        <el-date-picker v-model="date" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
                            :default-time="['12:00:00']" @change="changeDate">
                        </el-date-picker>
                    </div>
                </div>
                <div>
                    <el-radio v-model="coupon.limited" :label="0">不限</el-radio>
                    <el-radio v-model="coupon.limited" :label="1">有限</el-radio>
                </div>

                <div>
                    <el-radio v-model="coupon.overall" :label="0">仅限本店</el-radio>
                    <el-radio v-model="coupon.overall" :label="1">不限店铺</el-radio>
                </div>

                <el-input v-model="coupon.number" placeholder="数量" :disabled="coupon.limited == 0"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirm()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import API_URI from '@/util/API/ApiUtil'
import DateFormatToString from '@/util/common/DateFormat'
import ObjectNotEmpty from '@/util/common/ObjectNotEmpty'
export default {
    data() {
        return {
            search: '',
            dialogVisible: false,
            date: [],
            update: 0,
            couponList: [],
            coupon: {
                "id": null,
                "storeId": "",
                "amount": null,
                "discountAmount": null,
                "startTime": null,
                "endTime": null,
                "limited": 1,
                "overall": 0,
                "number": null,
            },
            page: {
                current: 0,
                total: 0,
                pages: 0,
                size: 0,
            },
        }
    },
    created() {
        this.getCouponList(1)
    },
    methods: {
        clearCoupon() {
            this.coupon = {
                "id": null,
                "storeId": "",
                "amount": null,
                "discountAmount": null,
                "startTime": null,
                "endTime": null,
                "limited": 1,
                "overall": 0,
                "number": null,
            }

            this.date = []
        },
        add() {
            this.clearCoupon()
            this.dialogVisible = true
        },
        edit(data) {
            this.dialogVisible = true

            this.update = 1

            let keys = Object.keys(data)

            for (let i = 0; i < keys.length; i++) {
                let key = keys[i]
                this.coupon[key] = data[key]
            }

            this.date[0] = data.startTime
            this.date[1] = data.endTime

            console.log(data, this.coupon)

        },
        changeDate(date) {
            this.coupon.startTime = DateFormatToString(date[0])
            this.coupon.endTime = DateFormatToString(date[1])
            console.log(this.coupon.startTime)
        },
        getCouponList(current) {
            let data = {
                current
            }

            this.$axios.post(API_URI.GET_COUPON_LIST, data)
                .then(res => {
                    if (res.code == 200) {
                        this.couponList = res.data.storeActivityList.records
                        this.page = { ...res.data.storeActivityList }
                    } else {
                        this.$error(res.message)
                    }
                })
        },
        confirm(){            

            //新增
            if(this.update == 0){
                debugger
                let notEmpty = this.coupon.overall == 0 ? ObjectNotEmpty(this.coupon, ['id']) : ObjectNotEmpty(this.coupon, ['id', 'storeId'])

                if(!notEmpty){
                    this.$error("请填写完整信息")
                    return
                }

                let data = this.coupon

                this.$axios.post(API_URI.ADD_COUPON_ADMI, data)
                .then(res => {
                    if(res.code == 200){
                        this.$success(res.message)
                        this.dialogVisible = false

                        this.getCouponList(this.current)
                    }
                    else{
                        this.$error(res.message)
                    }
                })
            }

            //修改
            else{
                let notEmpty = this.coupon.overall == 0 ? ObjectNotEmpty(this.coupon) : ObjectNotEmpty(this.coupon, ['storeId'])


                this.dialogVisible = false
            }

        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
    }
}
</script>

<style scoped>
.opeation {
    display: flex;
    justify-content: space-between;

    margin: 10px 0;
}

.search {
    width: 60%;
}

.form-box .el-input,
.form-box div {
    margin: 10px 0;
}
</style>